<template>
  <div class="nav-content">
    <div class="nav-item" :class="nav==1?'nav-item-select':''" @click="setNav(1)">我的</div>
    <div class="nav-item" :class="nav==2?'nav-item-select':''" @click="setNav(2)">分类</div>
    <div class="nav-item" :class="nav==3?'nav-item-select':''" @click="setNav(3)">排行</div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      nav: 3,
      playSongId: ''
    }
  },
  mounted: function () {
  },
  methods: {
    setNav: function (type) {
      switch (type) {
        case 1:
          this.nav = 1
          this.$router.push('/mymusic')
          break
        case 2:
          this.$router.push('/classify')
          this.nav = 2
          break
        case 3:
          this.$router.push({name: 'Ranking', params: { playSongId: this.playSongId }})
          this.nav = 3
          break
        default:
          break
      }
    },
    setPlaySongId: function (playSongId) {
      this.playSongId = playSongId
    }
  }
}
</script>
<style scope>
.nav-content{width: 60%;height: 50px;padding: 0 20%;display: flex;justify-content: space-around;align-items: center;background: #e8483c;position: fixed;top: 0;left: 0}
.nav-item{height: 30px;color: #ffffff;font-size: 14px;line-height: 30px}
.nav-item-select{border-bottom: 2px solid #ffffff;font-size: 16px}
</style>
